import React, { useEffect } from 'react'
import { Link } from 'react-router-dom'
import TagCircle from '../newsComponents/tagCircle'
import './message.scss'

function Com(props) {

  useEffect(() => {
    // 在这里请求数据,在下面渲染, 每一个li 
  }, [])

  return (
    <>
      <ul className='news_msglist'>
        {
          [1, 2, 3].map(item => {
            return (
              <Link to={ '/news/chatScreen/' + item}  key={item}>
                <li  >{item}</li>
              </Link>
            )
          })
        }
        <li>
          <div className="news_msglist_avatar">
            <img src="/images/tupian_06.gif" alt="" />
          </div>
          <div className="news_msglist_content">
            <p className='news_msglist_content_title'><span>高三（9）班学生群</span><i>10月21日</i></p>
            <p className="news_msglist_content_info">别忘记带上《三年高考/五年模拟》</p>
          </div>
        </li>
        <li>
          <div className="news_msglist_avatar">
            {/* content 就是数据的长度 先预设为二 */}
          <TagCircle position={{ 
            top:'14%',
            left: '76%'
           }} content={ 2 }/>
            <img src="/images/tupian_06.gif" alt="" />
          </div>
          <div className="news_msglist_content">
            <p className='news_msglist_content_title'><span>木槿花开（学生）</span><i>昨天</i></p>
            <p className="news_msglist_content_info">[语音] </p>
          </div>
        </li>
      </ul>
    </>
  )
}
export default Com